<template>
<block>
<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，项目使用请保留此说明
-->
<view class="cu-list menu-avatar bg-white padding-bottom" style="background-color:#f3f4f7 !important;">
  <view class="flex justify-end margin-right">
    <view class="text-xl margin-top" @tap="settings">
      <text class="cuIcon-settingsfill text-black"></text>
    </view>
  </view>
  <view class="cu-avatar round xl head flex" :style="'background-image:url('+(wxUser.headimgUrl)+')'">{{!wxUser.headimgUrl ? '头' : ''}}</view>
  <view class="content text-center margin-top-sm">
    <view class="margin-top-xs text-xxl text-bold text-black" v-if="wxUser.nickName">{{wxUser.nickName}}</view>
    <button class="cu-btn round sm margin-top-xs" @tap="getUserProfile">
{{!wxUser.nickName ? '获取昵称' : '更新昵称'}}</button>
  </view>
</view>
<view class="cu-listradius order-list">
  <view class="cu-bar">
    <view class="action">
      <text class="cuIcon-titles text-black titles-color"></text>我的订单
    </view>
    <navigator class="action" url="/pages/order/order-list/index" hover-class="none">
      全部订单<text class="cuIcon-right"></text>
    </navigator>
  </view>
  <view class="cu-list grid col-4 no-border order-list-2">
    <view class="cu-item">
      <navigator url="/pages/order/order-list/index?status=0" hover-class="none">
      <image class="order-image" src="/static/public/img/5-1.png"></image>
        <text class="text-black">待付款</text>
      </navigator>
    </view>
    <view class="cu-item">
      <navigator url="/pages/order/order-list/index?status=1" hover-class="none">
        <image class="order-image" src="/static/public/img/5-2.png"></image>
        <text class="text-black">待发货</text>
      </navigator>
    </view>
    <view class="cu-item">
      <navigator url="/pages/order/order-list/index?status=2" hover-class="none">
        <image class="order-image" src="/static/public/img/5-3.png"></image>
        <text class="text-black">待收货</text>
      </navigator>
    </view>
    <view class="cu-item">
      <navigator url="/pages/order/order-list/index?status=4" hover-class="none">
        <image class="order-image" src="/static/public/img/5-4.png"></image>
        <text class="text-black">已完成</text>
      </navigator>
    </view>
  </view>
</view>
<view class="cu-list menu card-menu radius address">
  <navigator class="cu-item arrow" url="/pages/user/user-address/list/index" hover-class="none">
    <view class="content">
      <image class="address-image" src="/static/public/img/7-1.png"></image>
      <text class="text-black">收货地址</text>
    </view>
  </navigator>
</view>


</block>
</template>

<script>
const app = getApp();
export default {data() {
            return {
  config: app.globalData.config,
  wxUser: null,
  userInfo: null,
  orderCountAll: []
};
        },onShow() {
  //更新tabbar购物车数量
  uni.setTabBarBadge({
    index: 2,
    text: app.globalData.shoppingCartCount + ''
  });
  let wxUser = app.globalData.wxUser;
  this.setData({
    wxUser: wxUser
  });
  this.wxUserGet();
  this.orderCountAllFun();

  // if (this.data.config.adEnable) {
  if (this.config.adEnable) {
    // 在页面中定义插屏广告
    let interstitialAd = null; // 在页面onLoad回调事件中创建插屏广告实例

    if (uni.createInterstitialAd) {
      interstitialAd = uni.createInterstitialAd({
        adUnitId: this.config.adInsertScreenID
      });
      interstitialAd.onLoad(() => {});
      interstitialAd.onError(err => {});
      interstitialAd.onClose(() => {});
    } // 在适合的场景显示插屏广告


    if (interstitialAd) {
      interstitialAd.show().catch(err => {
        console.error(err);
      });
    }
  }
}, 
onLoad() {
  this.onLoadClone3389();
}, 
methods: {
    onLoadClone3389() {},

    /**
     * 小程序设置
    */
    settings: function () {
      uni.openSetting({
        success: function (res) {
          console.log(res.authSetting);
        }
      });
    },

    getUserProfile(e) {
      uni.getUserProfile({
        desc: '用于完善会员资料',
        // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: detail => {
          app.globalData.api.wxUserSave(detail).then(res => {
            let wxUser = res.data;
            this.setData({
              wxUser: wxUser
            });
            app.globalData.wxUser = wxUser;
            this.wxUserGet();
          });
        }
      });
    },

    //获取商城用户信息
    wxUserGet() {
      app.globalData.api.wxUserGet().then(res => {
        this.setData({
          userInfo: res.data
        });
      });
    },

    orderCountAllFun() {
      app.globalData.api.orderCountAll().then(res => {
        this.setData({
          orderCountAll: res.data
        });
      });
    }
}};
</script>
<style >
/**index.wxss**/
page{
  background-color:#f3f4f7 !important;
}

.order-list{
  margin: auto;
  border-radius: 40rpx;
  background-color: white;
}

.order-list-2{
  background-image: linear-gradient(#fff, #f3f4f7);
}

.order-image{
  width: 80rpx;
  height: 80rpx;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

.address{
  margin-top: 60rpx !important;
}

.address-image{
  width: 100rpx;
  height: 100rpx;
}

.head {
  margin: auto;
  box-shadow: 0rpx 0rpx 50rpx 10rpx rgba(211, 211, 211, 0.5);
}

.titles-color{
  color:rgb(107, 107, 107);
}

.text-black{
  color: #000 !important;
}
</style>